<template>
	<view style="padding: 20rpx;overflow-y: auto;padding-bottom: 140rpx;">
		<u--form labelPosition="left" :model="userInfo" :rules="rules" ref="uForm">
			<u-form-item label="商家名称" prop="storeName" borderBottom labelWidth='90'>
				<u--input v-model="userInfo.storeName" border="none" placeholder="请输入商家名称"></u--input>
			</u-form-item>
			<u-form-item label="商家简介" prop="storeInfo" borderBottom labelWidth='90'>
				<u--input v-model="userInfo.storeInfo" border="none" placeholder="请输入商家简介"></u--input>
			</u-form-item>
			<u-form-item label="电话" borderBottom labelWidth='90'>
				<u--input v-model="userInfo.phone" border="none" placeholder="请输入电话" disabled></u--input>
			</u-form-item>
			<u-form-item label="地址" prop="address" borderBottom labelWidth='90'>
				<u--input v-model="userInfo.address" border="none" placeholder="请输入地址"></u--input>
			</u-form-item>
			<u-form-item label="类型" prop="storeType" borderBottom labelWidth='90'>
				<!-- <u-form-item label="类型" prop="storeType" borderBottom labelWidth='90' @click="show = true;"> -->
				<u-checkbox-group v-model="userInfo.storeType" placement="column" @change="checkboxChange">
					<u-scroll-list :indicator="false">
						<u-checkbox :customStyle="{marginRight: '8px'}" v-for="(item, index) in columns" :key="index"
							:label="item.name" :name="item.name">
						</u-checkbox>
					</u-scroll-list>
				</u-checkbox-group>

				<!-- <u--input v-model="userInfo.storeType" disabled disabledColor="#ffffff" placeholder="请选择性别"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon> -->
			</u-form-item>
			<u-form-item label="logo" borderBottom labelWidth='90' prop="logo">
				<div style="display: flex;width: 100%;flex-wrap: wrap;align-items: center;gap: 20rpx;">
					<u--image v-if="userInfo.logo" :showLoading="true" :src="userInfo.logo" width="80px" height="80px"
						@click="delImg(userInfo.logo,'logo')"></u--image>
					<u-icon name="photo" @click="clickImg('logo')" size="28"></u-icon>
				</div>
			</u-form-item>
			<u-form-item label="商家背景图" borderBottom labelWidth='90' prop="storeBackground">
				<div style="display: flex;width: 100%;flex-wrap: wrap;align-items: center;gap: 20rpx;">
					<u--image :showLoading="true" :src="item" width="80px" height="80px"
						v-for="(item,index) in userInfo.storeBackground" :key="index"
						@click="delImg(item,'storeBackground')"></u--image>
					<u-icon name="photo" @click="clickImg('storeBackground')" size="28"></u-icon>
				</div>
			</u-form-item>
			<u-form-item label="商家资质" borderBottom labelWidth='90' prop="storeAp">
				<div style="display: flex;width: 100%;flex-wrap: wrap;align-items: center;gap: 20rpx;">
					<u--image :showLoading="true" :src="item" width="80px" height="80px"
						v-for="(item,index) in userInfo.storeAp" :key="index"
						@click="delImg(item,'storeAp')"></u--image>
					<u-icon name="photo" @click="clickImg('storeAp')" size="28"></u-icon>
				</div>
			</u-form-item>
		</u--form>
		<view class="submitDiv">
			<u-button type="primary" @click="submit">提交</u-button>
		</view>
		<u-picker :show="show" :columns="columns" keyName="name" @confirm='confirmPicker'
			@cancel="cancelPicker"></u-picker>
	</view>
</template>

<script>
	import {
		deletePhoto,
		businessAdd,
		businessType
	} from '@/api/userCenter.js'
	export default {
		data() {
			return {
				// BASE_URL: 'http://192.168.10.243:8081', //刘
				BASE_URL: 'http://192.168.10.122:8081', //张
				showSex: false,
				userInfo: {
					storeName: '',
					storeInfo: '',
					phone: '',
					address: '',
					logo: '',
					storeBackground: [],
					storeAp: [],
					storeType: []
				},
				rules: {
					'storeName': {
						type: 'string',
						required: true,
						message: '请填写商家名称',
						trigger: ['blur', 'change']
					},
					'storeInfo': {
						type: 'string',
						required: true,
						message: '请填写商家简介',
						trigger: ['blur', 'change']
					},
					'address': {
						type: 'string',
						required: true,
						message: '请填写地址',
						trigger: ['blur', 'change']
					},
					'storeType': {
						type: 'array',
						required: true,
						message: '请选择',
						trigger: ['blur', 'change']
					},
					'logo': {
						type: 'string',
						required: true,
						message: '请选择',
						trigger: ['change']
					},
					'storeBackground': {
						type: 'array',
						required: true,
						message: '请选择',
						trigger: ['change']
					},
					'storeAp': {
						type: 'array',
						required: true,
						message: '请选择',
						trigger: ['change']
					},
				},
				show: false,
				columns: []
			};
		},
		onLoad(option) {
			if (option.phone) {
				this.userInfo.phone = option.phone
			}
		},
		onShow() {
			this.getbusinessType()
		},
		methods: {
			checkboxChange(e) {
				this.userInfo.storeType=e
			},
			async getbusinessType() {
				this.columns = []
				let res = await businessType()
				if (res.code == 200) {
					this.columns = res.data
				}
			},
			// 下拉框点击关闭
			cancelPicker() {
				this.show = false
			},
			// 下拉框点击确认
			confirmPicker(e) {
				this.userInfo.type = e.value[0].name
				this.show = false
			},
			// 删除图片
			delImg(str, newStr) {
				let filename = str.split('/').pop(); // 提取文件名部分
				deletePhoto({
					filename
				}).then(response => {
					if (newStr == 'logo') {
						console.log(this.userInfo.logo, 'logo');
						this.userInfo.logo = ''
					} else if (newStr == 'storeBackground') {
						let newArr = this.userInfo.storeBackground.filter(res => {
							return res != str
						})
						this.userInfo.storeBackground = newArr
						console.log(this.userInfo.logo, 'storeBackground');
					} else if (newStr == 'storeAp') {
						console.log(this.userInfo.logo, 'storeAp');
						this.userInfo.storeAp = ''
					}
				})
			},
			// 上传图片
			clickImg(str) {
				let newStr = null
				if (str == 'logo') {
					newStr = this.userInfo.logo
				} else if (str == 'storeBackground') {
					newStr = this.userInfo.storeBackground
				} else if (str == 'storeAp') {
					newStr = this.userInfo.storeAp
				}
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: `${this.BASE_URL}/commonUtil/addPhoto`, //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'Content-Type': 'multipart/form-data',
								'Authorization': wx.getStorageSync('userInfo').token,
								'satoken': wx.getStorageSync('userInfo').token
							},
							success: (res) => {
								let resData = JSON.parse(res.data)
								if (resData.code == 200) {
									if (str == 'logo') {
										this.userInfo.logo = resData.data
										console.log(this.userInfo.logo, 'logo');
									} else if (str == 'storeBackground') {
										this.userInfo.storeBackground.push(resData.data)
										console.log(this.userInfo.storeBackground,
											'storeBackground');
									} else if (str == 'storeAp') {
										this.userInfo.storeAp.push(resData.data)
										console.log(this.userInfo.storeAp, 'storeAp');
									}

								}
							}
						});
					}
				});


			},
			// 点击确认
			submit() {
				this.$refs.uForm.validate().then(res => {
					businessAdd(this.userInfo).then(res => {
						if (res.code == 200) {
							wx.showToast({
								title: res.msg,
								icon: 'success',
								duration: 1000
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						}
					})
				}).catch(errors => {
					uni.$u.toast('请全部输入')
				})
			},
		}
	}
</script>

<style lang="scss">
	.submitDiv {
		width: 80%;
		position: fixed;
		bottom: 40rpx;
		left: 50%;
		transform: translate(-50%, 0);
	}
</style>